<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<input type="text" v-model="msg" />{{ msg | capitalize_gobal | replaceab('e','f')}}
		</div>
		<script>
			//全局过滤器
			Vue.filter('capitalize_gobal',function(msg){
				if (!msg) return ''
				msg = msg.toString()
				return msg.charAt(0).toUpperCase()+msg.charAt(1).toUpperCase()+msg.slice(2)
			})
			var vue = new Vue({
				el:'#test',
				data:{
					msg:""
				},
				//局部过滤器
				filters:{
					capitalize:function(msg){
						if (!msg) return ''
						msg = msg.toString()
						return msg.charAt(0).toUpperCase()+msg.slice(1)
					},
					replacea:function(msg){
						return msg.replace(/a/g,'b')
					},
					replaceab:function(msg,arg1,arg2){
						return msg.replace(/[ab]/g,`${arg1}${arg2}`)
					}
					
				}
			})
		</script>
	</body>
</html>
